<template>
  <!-- 全局错误边界包装器 -->
  <ErrorBoundary>
    <TransitionRouter />
  </ErrorBoundary>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

/**
 * 导入Vue 3组合式API
 * @description 用于响应式数据管理和路由监听
 */
import { watch } from 'vue'

/**
 * 导入Vue Router
 * @description 用于路由信息获取
 */
import { useRoute } from 'vue-router'

/**
 * 导入过渡路由组件
 * @description 用于页面切换动画
 */
import TransitionRouter from './components/TransitionRouter.vue'

/**
 * 导入错误边界组件
 * @description 用于捕获全局错误并显示友好界面
 */
import ErrorBoundary from './components/ErrorBoundary.vue'

// ==================== 获取实例 ====================

/**
 * 获取当前路由实例
 * @description 用于监听路由变化
 */
const route = useRoute()

// ==================== 路由监听逻辑 ====================

/**
 * 监听路由变化，自动滚动到顶部
 * @description 确保页面切换时滚动到顶部，提升用户体验
 */
watch(
  () => route.path,
  () => {
    // 使用 setTimeout 确保 DOM 更新后再滚动
    setTimeout(() => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }, 100)
  },
  { immediate: true }
)
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#app {
  height: 100%;
  width: 100%;
  background-color: #fefefe;
  font-size: 16px;
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Element Plus 组件样式覆盖 */
.el-input__wrapper {
  box-shadow: none !important;
}

.el-input__inner {
  font-family: inherit;
}
</style>
